<template>
  <div style="height: 40px; background: #fff; display: flex; padding: 10px">
    <div class="item">
      <span class="citem">公告类型</span>
      <el-select
        v-model="searchForm.title"
        placeholder="请选择公告类型"
        style="width: 180px"
        clearable
      >
        <el-option
          v-for="(item, index) in select"
          :key="index"
          :label="item.label"
          :value="item.title"
        />
      </el-select>
    </div>
    <div class="item">
      <span class="citem">操作人员</span>
      <el-input
        placeholder="请输入操作人员"
        v-model="searchForm.admin"
        style="width: 180px"
        clearable
      ></el-input>
    </div>
    <div class="item">
      <span class="citem">发布时间</span>
      <el-date-picker
        v-model="searchForm.createTime"
        type="datetime"
        placeholder="选择发布时间"
        style="width: 180px"
        clearable
      />
    </div>
    <div>
      <el-button type="primary" @click="search"
        ><el-icon><Search /></el-icon>搜索</el-button
      >
      <el-button @click="reset"
        ><el-icon><Refresh /></el-icon>重置</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { ref } from 'vue'

const emit = defineEmits(['search'])

const searchForm = ref({
  title: '',
  admin: '',
  createTime: null
})

const select = ref([
  { title: '公告', label: '公告' },
  { title: '通知', label: '通知' }
])

const search = () => {
  if (
    searchForm.value.title === '' &&
    searchForm.value.admin === '' &&
    searchForm.value.createTime === null
  ) {
    ElNotification.warning('抱歉，搜索条件不能为空')
    return
  }

  emit('search', searchForm.value)
}

const reset = () => {
  searchForm.value = {
    title: '',
    admin: '',
    createTime: null
  }
}
</script>

<style scoped>
.item {
  width: 260px;
  margin-right: 10px;
}

.citem {
  margin-right: 5px;
}
</style>
